import AppContainer from '@/components/AppContainer';
import QueryFilter from '@/components/QueryFilter';
import Toolbar from '@/components/Toolbar';
import useAntdList from '@/hooks/useAntdList';
import useAntdModal from '@/hooks/useAntdModal';
import useList from '@/hooks/useList';
import { queryApps } from '@/service/deliver';
import { queryAccount, queryMapping, queryNoticeList } from '@/service/globalSetting';
import { PlusOutlined } from '@ant-design/icons';
import { CopyToClipboard } from 'react-copy-to-clipboard';

import { Button, Card, Form, Input, Select, Space, Table, Tag } from 'antd';
import { ColumnsType } from 'antd/lib/table';

import React from 'react';
import SaveMapping from './components/SaveAccount';



const App = () => {
  const { tableProps, search, refresh } = useAntdList(queryAccount, {})
  const saveMapping= useAntdModal({ refresh })
  let [form] = Form.useForm()
  const columns: ColumnsType<any> = [{
    title: 'ID',
    dataIndex: 'id'
  }, {
    title: '账号',
    dataIndex: 'account'
  }, {
    title: '邮箱',
    dataIndex: 'email'
  },  {
    title: '员工ID',
    dataIndex: 'staffId'
  }, {
    title: '云效ID',
    dataIndex: 'codeupId'
  }, {
    title: '创建时间',
    dataIndex: 'createdAt'
  }, {
    title: '更新时间',
    dataIndex: 'updatedAt'
  }, {
    title: '操作',
    render(_) {
      return <Space>
        <Button type='link' onClick={() => saveMapping.openModal({
          ..._,
          password:'******'
        }, { title: '编辑用户' })}>编辑</Button>
      </Space>
    }
  }
  ]
  console.log('tablePorps', tableProps)
  return (<AppContainer queryFilter={
    <QueryFilter form={form} submit={search.submit} reset={search.reset} >
      <Form.Item label="名称"> <Input /></Form.Item>
      <Form.Item label="类型"> <Select options={[{
        value:'codeup',
        label:'云效用户映射'
      }]} /></Form.Item>

    </QueryFilter>
  }>
    <SaveMapping {...saveMapping}/>
    <Toolbar
      leftRender={<Button type='primary'  icon={<PlusOutlined />}
        onClick={() => saveMapping.openModal({}, { title: '新建用户' })}
      >新建用户</Button>}
    />
    <Table
      rowKey="id"
      columns={columns}
      {...tableProps}

      onChange={(pagination) => {
        // setPage(pagination.current);
      }}
    // pagination={{ total, current: page, pageSize: 5, simple: true }}
    />
  </AppContainer>)
}
export default App